<template>
    <div class="classify-root">
        <router-link to="/home/classify/detail">
        <div class="classify-root1">
            <div 
            class="classify-item"
            v-for="(items,i) in classList" 
            :key="i"
            >
            <div class="classify-rgba">
                <p class="classify-name">{{items.name}}</p>
                <p class="classify-count">共{{items.count}}本</p>
            </div>
            </div>
            <div v-if="classList.length%2==1" style="visibility:hidden" class="classify-item"></div>
        </div>
        </router-link>
       
    </div>
</template>

<script>
    import {mapState} from "vuex";
    export default {
        data(){
            return{

            }
        },
        computed:{
            ...mapState(["classList"])
        }


    }
</script>

<style scoped lang="less">
    a{
        text-decoration: none;
    }
    .classify-root1{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin:5.5vw 5.9vw 1.1vw 5.9vw; 
    }
    .classify-item{
        width: 41.6vw;
        height: 25.3vw;
        border-radius: 1.1vw;
        background-image: url(/img/classify.png);
        background-size: 100% 100%;
        margin-bottom:4.3vw; 
    }
    .classify-rgba{
        width: 100%;
        height: 100%;
        border-radius: 1.1vw;
        background-color: rgba(122,122,122,0.6);
    }
    .classify-name{
        color: #ffffff;
        font-weight: bold;
        font-size: 4.3vw;
        padding:3.5vw 0 0.8vw 2.7vw;
    }
    .classify-count{
        color: rgba(255,255,255,0.8);
        font-weight: bold;
        font-size: 3.2vw;
        padding-left:2.7vw;
        // opacity: 0.9; 
    }
    

</style>